<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>报修详情</span>
          <el-button type="primary" @click="handleBack">返回</el-button>
        </div>
      </template>

      <el-descriptions title="基本信息" :column="2" border v-loading="loading">
        <el-descriptions-item label="社区">{{ form.communityName || (form.communityId ? `社区ID:${form.communityId}` : '-') }}</el-descriptions-item>
        <el-descriptions-item label="楼宇">{{ form.buildingName || (form.buildingId ? `楼宇ID:${form.buildingId}` : '-') }}</el-descriptions-item>
        <el-descriptions-item label="报修类型">{{ form.repairType }}</el-descriptions-item>
        <el-descriptions-item label="报修房间号">{{ form.roomNo }}</el-descriptions-item>
        <el-descriptions-item label="报修人">{{ form.reporter }}</el-descriptions-item>
        <el-descriptions-item label="报修人电话">{{ form.reporterPhone }}</el-descriptions-item>
        <el-descriptions-item label="报修时间">{{ parseTime(form.reportTime) }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(form.status)">
            {{ getStatusText(form.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="处理人">{{ form.workName}}</el-descriptions-item>
        <el-descriptions-item label="处理时间">{{ parseTime(form.handleTime) }}</el-descriptions-item>
        <el-descriptions-item label="优先级">{{ form.priority }}</el-descriptions-item>
        <el-descriptions-item label="预计完成时间">{{ parseTime(form.estimatedTime) }}</el-descriptions-item>
        <el-descriptions-item label="实际完成时间">{{ parseTime(form.actualTime) }}</el-descriptions-item>
        <el-descriptions-item label="费用">{{ form.fee }}</el-descriptions-item>
        <el-descriptions-item label="是否付费">{{ form.isPaid ? '是' : '否' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="详细描述" :column="1" border style="margin-top: 20px;">
        <el-descriptions-item label="报修描述">
          <div style="min-height: 60px;">{{ form.description }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="处理描述">
          <div style="min-height: 60px;">{{ form.handleDescription }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="相关图片">
          <div class="image-list">
            <img :src="form.images"
                 style="width: 100px; height: 100px; margin-right: 10px;"
                 alt="报修图片"
            />
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup name="RepairDetail">
import {getRepair} from "@/api/property/repair"
import {useRoute, useRouter} from 'vue-router'

const route = useRoute()
const router = useRouter()
const {proxy} = getCurrentInstance()

const loading = ref(true)

// 解析时间显示
function parseTime(time) {
  if (!time) return '-'
  return proxy.parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
}

// 状态映射
const statusMap = {
  0: {text: '处理完成', type: 'success'},
  1: {text: '已提交', type: 'warning'},
  2: {text: '未处理', type: 'danger'},
  3: {text: '处理中', type: 'primary'}
}

// 获取状态显示文本
function getStatusText(status) {
  return statusMap[status]?.text || '未知状态'
}

// 获取状态对应的标签类型
function getStatusType(status) {
  return statusMap[status]?.type || 'info'
}

const form = ref({
  workName:null,
  communityId: null,
  buildingId: null,
  communityName: '',
  buildingName: '',
  repairType: '',
  roomNo: '',
  reporter: '',
  reporterPhone: '',
  reportTime: '',
  status: '',
  handler: '',
  handleTime: '',
  priority: '',
  estimatedTime: '',
  actualTime: '',
  fee: '',
  isPaid: false,
  description: '',
  handleDescription: '',
  images: ''
})

function handleBack() {
  router.push('/property/repair')
}

// 从列表数据中获取社区和楼宇名称
function getCommunityAndBuildingNames(repairId) {
  try {
    // 从 sessionStorage 获取列表数据
    const listData = JSON.parse(sessionStorage.getItem('repairList') || '[]')
    console.log('sessionStorage中的列表数据:', listData)

    const currentItem = listData.find(item => item.repairId == repairId)
    console.log('找到的当前项:', currentItem)

    if (currentItem) {
      // 更新表单中的社区和楼宇名称
      if (currentItem.communityName) {
        form.value.communityName = currentItem.communityName
      }
      if (currentItem.buildingName) {
        form.value.buildingName = currentItem.buildingName
      }
      if (currentItem.workName) {
        form.value.workName = currentItem.workName
      }
      console.log('更新后的表单数据:', form.value)
    }
  } catch (error) {
    console.error('从列表数据获取名称失败:', error)
  }
}

// 修改详情页面的 getDetail 方法
function getDetail(repairId) {
  loading.value = true
  getRepair(repairId).then(response => {
    // 首先设置接口返回的基本数据
    form.value = {
      ...response.data
    }

    // 然后从列表数据中获取社区和楼宇名称
    getCommunityAndBuildingNames(repairId)

    loading.value = false
  }).catch(() => {
    loading.value = false
    proxy.$modal.msgError("获取详情失败")
  })
}

// 在详情页面中
onMounted(() => {
  const repairId = route.params.repairId
  if (repairId) {
    getDetail(repairId)
  } else {
    proxy.$modal.msgError("未找到报修ID")
    handleBack()
  }
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>